Skip to Content

CORE

scene

创建场景

  • new THREE.Scene()
constructor Scene(): THREE.Scene

向场景添加物体

  • scene.add()
(method) Object3D<Object3DEventMap>.add(
	...object: THREE.Object3D[]
): THREE.Scene

camera

创建相机

  • new THREE.PerspectiveCamera()
constructor PerspectiveCamera(
	fov?: number, 
	aspect?: number, 
	near?: number, 
	far?: number
): THREE.PerspectiveCamera

控制相机

  • set()
(method) Vector3.set(
	x: number,
	y: number, 
	z: number
): THREE.Vector3
  • camera.position

render

创建着色器

  • new THREE.WebGLRenderer()
constructor WebGLRenderer(
	parameters?: THREE.WebGLRendererParameters
): THREE.WebGLRenderer

设置渲染尺寸

  • setSize()
(method) WebGLRenderer.setSize(
	width: number, 
	height: number, 
	updateStyle?: boolean
): void

动画渲染

  1. 创建渲染动画：renderer.render()
(method) WebGLRenderer.render(
	scene: THREE.Object3D, 
	camera: THREE.Camera
): void
  1. 设置动画循环：renderer.setAnimationLoop()
(method) WebGLRenderer.setAnimationLoop(
	callback: XRFrameRequestCallback | null
): void

Object

Cube

创建物体几何

  • new THREE.BoxGeometry()
constructor BoxGeometry(
	width?: number, 
	height?: number, 
	depth?: number, 
	widthSegments?: number, 
	heightSegments?: number,
	depthSegments?: number
): THREE.BoxGeometry

创建物体材质

  • new THREE.MeshBasicMaterial()
constructor MeshBasicMaterial(
	parameters?: THREE.MeshBasicMaterialParameters
 ): THREE.MeshBasicMaterial

创建物体网格

  • new THREE.Mesh()
constructor Mesh<THREE.BoxGeometry, THREE.MeshBasicMaterial, THREE.Object3DEventMap>(
	geometry?: THREE.BoxGeometry | undefined, 
	material?: THREE.MeshBasicMaterial | undefined
): THREE.Mesh<...>

控制物体

  • cube.rotation
  • cube.position

Line

创建直线几何

  1. 创建缓冲几何体对象：new THREE.BufferGeometry()
constructor BufferGeometry<THREE.NormalBufferAttributes>(): THREE.BufferGeometry<THREE.NormalBufferAttributes>
  1. 缓冲几何顶点数据：setFromPoints()
(method) BufferGeometry<NormalBufferAttributes>.setFromPoints(
	points: THREE.Vector3[] | THREE.Vector2[]
): THREE.BufferGeometry<THREE.NormalBufferAttributes>

创建直线材质

  • LineBasicMaterial()
constructor LineBasicMaterial(
	parameters?: THREE.LineBasicMaterialParameters
): THREE.LineBasicMaterial

创建直线线段

  • new THREE.Line()
constructor Line<THREE.BufferGeometry<THREE.NormalBufferAttributes>, THREE.LineBasicMaterial, THREE.Object3DEventMap>(
	geometry?: THREE.BufferGeometry<THREE.NormalBufferAttributes> | undefined, 
	material?: THREE.LineBasicMaterial | undefined
): THREE.Line<...>

Light

环境光

  • new THREE.AmbientLight()
constructor AmbientLight(
	color?: THREE.ColorRepresentation, 
	intensity?: number
): THREE.AmbientLight

平行光

  • new THREE.DirectionalLight()
constructor DirectionalLight(
	color?: THREE.ColorRepresentation, 
	intensity?: number
): THREE.DirectionalLight

EXTENSION

Loader

导入对应模型加载器

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

创建加载器对象

  • new GLTFLoader()
new GLTFLoader(
	manager?: THREE.LoadingManager
): GLTFLoader

加载模型

  • loader.load()
(method) Loader<GLTF, string>.load(
	url: string, 
	onLoad: (data: GLTF) => void, 
	onProgress?: (event: ProgressEvent) => void, 
	onError?: (err: unknown) => void
): void

Control

OrbitControls

功能

  • 允许用户通过鼠标和键盘来旋转、平移和缩放场景

创建轨道控制器

  • new OrbitControls()
new OrbitControls(
	object: THREE.Camera,
	domElement?: HTMLElement | null //控制器要监听的元素，来捕获交互事件
): OrbitControls

控制轨道控制器属性

// 设置相机距离限制
controls.minDistance = 2;  // 最近距离
controls.maxDistance = 10; // 最远距离
 
// 设置垂直旋转角度限制
controls.minPolarAngle = 0; // 最小仰角
controls.maxPolarAngle = Math.PI; // 最大仰角
 
// 启用或禁用缩放
controls.enableZoom = true;
 
// 启用或禁用旋转
controls.enableRotate = true;
 
// 启用或禁用平移
controls.enablePan = true;
 
// 设置阻尼效果(惯性)
controls.enableDamping = true;
controls.dampingFactor = 0.05;
 
//在使用阻尼效果时,需要在动画循环中更新控制器状态，否则阻尼不起效
controls.update();

PointerLockControls

TransformControls

DragControls

Plugins

Last updated on
Map